<template>
  <div class="card-table">
    <nav class="table-nav">
      <el-form :inline="true" label-width="100px" :model="selectForm">
        <el-form-item label="操作账号：">
          <el-input
            v-model.trim="selectForm.query.loginName"
            clearable
            placeholder="请输入操作账号"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="操作模块：">
          <!-- <el-cascader
            expand-trigger="hover"
            clearable
            :options="moduleOptions"
            :props="moduleProps"
            v-model="menuNameOne"
            @change="handleChange"
          >
          </el-cascader> -->
          <el-input
            v-model.trim="selectForm.query.operModule"
            clearable
            placeholder="请输入操作模块"
          />
        </el-form-item>
        <el-form-item label="操作时间：">
          <el-date-picker
            clearable
            v-model.trim="modifyTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="操作类型：">
          <el-select
            clearable
            v-model.trim="selectForm.query.businessType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsType"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="float-item">
          <div class="btn-div">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitForm">查询</el-button>
          </div>
        </el-form-item>
      </el-form>
    </nav>
    <section style="padding: 0 10px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column label="操作时间" prop="operTime" align="center">
          <template slot-scope="scope">
            <span>{{
              $moment(scope.row.operTime).format("YYYY-MM-DD HH:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作账号"
          prop="loginName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作模块"
          prop="operModule"
          align="center"
        ></el-table-column>
        <el-table-column label="操作类型" prop="businessType" align="center">
          <template slot-scope="scope">
            <span>{{ filterType(optionsType, scope.row.businessType) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作人IP"
          prop="operIp"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作内容"
          prop="title"
          align="center"
        ></el-table-column>
      </el-table>
      <el-pagination
        class="body-pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="selectForm.page.current"
        :page-sizes="[10, 100, 200, 300, 400]"
        layout="total,sizes,prev,pager,next,jumper"
        :total="selectForm.page.total"
      >
      </el-pagination>
    </section>
  </div>
</template>
<script>
import { operationLogList, dict_biz } from "@/api/system/operation";
export default {
  data() {
    return {
      tableData: [],
      modifyTime: [],
      optionsType: [],
      selectForm: {
        page: {
          current: 1,
          size: 10,
          total: 0,
        },
        query: {
          businessType: "",
          loginName: "",
          menuName: "",
          moduleName: "",
          operModule: "",
          operTimeEnd: "",
          operTimeStart: "",
        },
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      moduleOptions: [],
      menuNameOne: [],
      moduleProps: {
        value: "dictKey",
        label: "dictValue",
      },
    };
  },
  methods: {
    resetForm() {
      this.selectForm = {
        page: {
          current: 1,
          size: 10,
          total: 0,
        },
        query: {
          businessType: "",
          loginName: "",
          menuName: "",
          moduleName: "",
          operTimeEnd: "",
          operTimeStart: "",
        },
      };
      this.modifyTime = "";
      this.menuNameOne = [];
      this.operationLogListData();
    },
    submitForm() {
      this.selectForm.query.operTimeStart =
        this.modifyTime && this.modifyTime[0] ? this.modifyTime[0] : "";
      this.selectForm.query.operTimeEnd =
        this.modifyTime && this.modifyTime[1] ? this.modifyTime[1] : "";
      this.operationLogListData();
    },
    operationLogListData() {
      operationLogList({
        current: this.selectForm.page.current,
        size: this.selectForm.page.size,
        ...this.selectForm.query,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.selectForm.page.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.selectForm.page.size = val;
      this.operationLogListData();
    },
    handleCurrentChange(val) {
      this.selectForm.page.current = val;
      this.operationLogListData();
    },
    businessTypeList(type) {
      dict_biz(type).then((res) => {
        this.optionsType = res.data[type];
      });
    },
    menuAndmoduleList(type, code, firstData) {
      if (code == 1) {
        let dictKeyArr = [];
        dict_biz(type).then((res) => {
          res.data[type].forEach((item) => {
            this.$set(item, "children", []);
            dictKeyArr.push(item.dictKey);
          });
          this.menuAndmoduleList(dictKeyArr.join(","), 2, res.data[type]);
        });
      } else {
        let dictKeyType = type.split(",");
        dict_biz(type).then((res) => {
          dictKeyType.forEach((item1) => {
            firstData.forEach((item2) => {
              if (item2.dictKey === item1) {
                item2.children = res.data[item1].length ? res.data[item] : "";
              }
            });
          });
          this.moduleOptions = firstData;
        });
      }
    },
    handleChange(type) {
      this.selectForm.query.moduleName = this.filterType(
        this.getFlatArr(this.moduleOptions),
        type[type.length - 1]
      );
    },
    getFlatArr(arr) {
      return arr.reduce((a, item) => {
        let flatArr = [...a, item];
        if (item.children) {
          flatArr = [...flatArr, ...this.getFlatArr(item.children)];
        }
        return flatArr;
      }, []);
    },
    filterType(arr, type) {
      let newList = arr.filter((item) => {
        return item.dictKey == type;
      });
      return newList[0] ? newList[0].dictValue : "";
    },
  },
  created() {
    this.operationLogListData();
    // this.menuAndmoduleList("oper_module", 1);
    this.businessTypeList("oper_type");
  },
};
</script>
<style lang="scss" scoped>
.card-table {
  .table-header {
    ::v-deep .el-card__body {
      padding: 13px;
      font-weight: bolder;
    }
  }
  .table-nav {
    padding: 16px;
  }
  .table-tag {
    display: inline-block;
    width: 70px;
    height: 23px;
    text-align: center;
    line-height: 23px;
    border-radius: 13px;
    color: #4e5969;
  }
  .table-tag1 {
    background: #aff0b5;
  }
  .table-tag2 {
    background: #b1d5fd;
  }
  .table-tag3 {
    background: #f0f1f3;
  }
  .el-dropdown-link {
    color: #1ca77b;
    font-size: 12px;
  }
}
</style>